<template>
<div class="detail-images">
  <div class="text">
    <div id="point1">
    </div>
    <div id="desc">{{detailimages.desc}}</div>
    <div id="point2">
    </div>
    <div id="key">{{detailimages.key}}</div>
  </div>
  
  <div class="imsges">
    <div class="" v-for="(item ,index) in detailimages.list">
      <img :src="item" alt="" @load="over">
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "DetailImages",
  props:{

  detailimages:{
    type:Object,
    defaule () {
      return {}
    }
  }
},
  methods:{
    over () {
      this.$emit('imagesload')
    }
  }

}
</script>

<style scoped>

.detail-images{
  position: relative;
  top:150px;
  margin: 15px;
}
.text{
  position: relative;
}
#point1{
  margin-bottom: 20px;
  width: 100px;
  position: relative;
  left: 0;
  border-bottom: 1px black solid;
}
#desc{
  font-size: 13px;
}
#point2{
  width: 100px;
  position: absolute;
  right: 0;
  border-bottom: 1px black solid;
  margin-top: 20px;
}
#key{
  position: absolute;
  top: 100px;
  font-weight: 600;
  color: #ff8198;
}
.imsges{
  position: relative;
  top:80px
}
.imsges img{
  width: 100%;
}

</style>